<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>用户信息</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="/css/base.css" />
    <link rel="stylesheet" href="/css/user/info.css" />
    <script src="/js/jquery-2.1.1.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/user/user.js"></script>
</head>
<body>
<header>
    <div class="header-top">
        <div class="wrap clearfix">
            <div class="top-add">
                <span>运送至：<a href="javascript:void(0)">广州</a></span>
            </div>
            <ul class="header-top-r">
                <li>你好，请登录<a href="javascript:void(0)" class="red">免费登录</a></li>
                <li class="top_r">
                    <span class="top-line on-red">我的订单<a class="more-icon">&or;</a></span>
                </li>
                <li class="top_r">
                    <span class="top-line on-red">我的商城<a class="more-icon">&or;</a></span>
                </li>
                <li class="top_r">
						<span class="top-line on-red">
							<i class="phone-sc-icon"></i>手机商城
						</span>
                </li>
                <li class="top_r"><span class="top-line on-red">客户服务<a class="more-icon">&or;</a></span>
                </li>
            </ul>
        </div>
    </div>
    <div class="header-ls" id="user-head">
        <div class="wrap cleafix">
            <div class="header-lg">
                <a href="javascript:void(0)" class="logo" title="NdShop"></a>
            </div>
            <div class="myshop">
                <h3>我的商场</h3>
                <a href="/index.html">返回首页</a>
            </div>
            <ul class="topnav">
                <li>
                    <a href="javascript:void(0)">首页</a>
                </li>
                <li>
                    <a href="javascript:void(0)">账户设置</a>
                </li>
                <li>
                    <a href="javascript:void(0)">消息</a>
                </li>
            </ul>

            <div class="search-wrap">
                <input type="text" class="search-strip" value="" placeholder="搜我想要的"/>
                <button class="button">
                    搜索
                </button>
            </div>
            <div class="shopping-cart">
                <a class="my-cart">
                    <svg role="img" class="shopping_white">
                        <use xlink:href="#shopping_white"></use>
                    </svg>
                    我的购物车
                    <svg role="img" class="button_next">
                        <use xlink:href="#button_next"></use>
                    </svg>
                </a>
            </div>

        </div>
    </div>

</header>
<!--左侧菜单栏-->

<!--内容-->
<div id="content" class="clearfix wrap">
    <div id="user-sidebar" class="clearfix">
        <h3>设置</h3>
        <div class="menu">
            <a href="/pages/user/info.html" class="active">个人信息</a>
            <a href="/pages/user/safety.html">账户安全</a>
            <a href="/pages/user/account_bind.html">账户绑定</a>
            <a href="/pages/user/ship_address.html">收货地址</a>
            <a href="/pages/user/consume.html">消费记录</a>
        </div>
    </div>
    <div class="info-con">
        <ul class="infonav clearfix">
            <li class="active">
                <a href="javascript:void(0)" data-title="infomain">基本信息</a>
            </li>
            <li>
                <a href="javascript:void(0)" data-title="avatar">头像照片</a>
            </li>
            <li>
                <a href="javascript:void(0)" data-title="moreinfo">更多个人信息</a>
            </li>
        </ul>
        <!--用户基本信息-->
        <div class="tabs infomain">
            <div class="form">
                <dl >
                    <dt>用户名：</dt>
                    <dd> <span>dounine</span></dd>
                </dl>
                <dl >
                    <dt> <i>*</i>登录名：</dt>
                    <dd>
                        <span>dounine</span>
                        <a href="javascript:void(0)" class="modifyname">修改</a>
                        <span class="p"> 可用于登录，请牢记~</span>
                    </dd>
                </dl>
                <dl >
                    <dt><i>*</i>用户名：</dt>
                    <dd><input type="text" value="dounine"></dd>
                </dl>
                <dl >
                    <dt><i>*</i>性别：</dt>
                    <dd>
                        <input type="radio" name="sex" checked> 男
                        <input type="radio" name="sex"> 女
                    </dd>
                </dl>
                <dl >
                    <dt>生日：</dt>
                    <dd>
                        <select >
                            <option value="">1990</option>
                            <option value="">1991</option>
                            <option value="">1992</option>
                        </select> 年
                        <select >
                            <option value="">1</option>
                            <option value="">2</option>
                            <option value="">3</option>
                        </select> 月
                        <select >
                            <option value="">1</option>
                            <option value="">2</option>
                            <option value="">3</option>
                        </select> 日
                    </dd>
                </dl>
                <dl >
                    <dt>兴趣爱好：</dt>
                    <dd>
                        请选择你感兴趣的分类，给你最精准的推荐
                        <p class="info-interest">
                            <a href="javascript:void(0)">图书/音像/数字商品</a>
                            <a href="javascript:void(0)">家用电器</a>
                            <a href="javascript:void(0)">手机/数码</a>
                            <a href="javascript:void(0)">电脑/办公</a>
                            <a href="javascript:void(0)">家居/家具/家装/厨房</a>
                            <a href="javascript:void(0)">服饰内衣/珠宝首饰</a>
                            <a href="javascript:void(0)">个户化妆</a>
                            <a href="javascript:void(0)">鞋靴/箱包/钟表/奢侈品</a>
                            <a href="javascript:void(0)">运动健康</a>
                            <a href="javascript:void(0)">汽车用品</a>
                            <a href="javascript:void(0)">母婴/玩具乐器</a>
                            <a href="javascript:void(0)">食品饮食/健康食品</a>
                            <a href="javascript:void(0)">彩票/旅行/充值/票务</a>
                        </p>
                    </dd>
                </dl>
                <dl>
                    <dt>邮箱：</dt>
                    <dd>123456@qq.com</dd>
                </dl>
                <dl>
                    <dt><i>*</i>真实姓名：</dt>
                    <dd><input type="text"></dd>
                </dl>

            </div>
            <div class="form-avatar">
                <img src="/images/clothing/tese01.jpg" alt="">
                <p><strong>用户名：</strong>dounine</p>
                <p><strong>会员类型：</strong>个人用户</p>
                <p>注：修改手机和邮箱请到<a href="javascript:void(0)">账户安全</a></p>
            </div>
        </div>
        <!--头像照片-->
        <div class="tabs avatar">
            <div class="fl">
                <div class="avatar-upload">
                    <label for="photo">
                        <svg role="img" class="picture">
                            <use xlink:href="#picture"></use>
                        </svg>
                        请选择你要上传的照片
                    </label>
                    <form>
                        <input type="file" id="photo">
                    </form>
                    <p>仅支持JPG、GIF、PNG、JPEG、BMP，文件小于4M</p>
                </div>
                <div class="avatar-pic">
                    <div class="mypic">
                        <img src="/images/clothing/tese01.jpg" alt="">
                    </div>
                </div>
                <div class="recavatar">
                    <h3>推荐头像</h3>
                    <ul>
                        <li>
                            <a href="javascript:void(0)"><img src="/images/clothing/tese01.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="/images/clothing/tese01.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="/images/clothing/tese01.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="/images/clothing/tese01.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="/images/clothing/tese01.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="/images/clothing/tese01.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="/images/clothing/tese01.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="/images/clothing/tese01.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="/images/clothing/tese01.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="/images/clothing/tese01.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="/images/clothing/tese01.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="/images/clothing/tese01.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="/images/clothing/tese01.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="/images/clothing/tese01.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="/images/clothing/tese01.jpg" alt=""></a>
                        </li>
                        <li>
                            <a href="javascript:void(0)"><img src="/images/clothing/tese01.jpg" alt=""></a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="fr">
                <h3>推荐头像</h3>
                <p>你上传的图片会自动生成2种尺寸，请注意小尺寸的头像是否清晰</p>
                <div class="pic100">
                    <img src="/images/clothing/tese01.jpg" alt="">
                    <p>100*100像素</p>
                </div>
                <div class="pic50">
                    <img src="/images/clothing/tese01.jpg" alt="">
                    <p>50*50像素</p>
                </div>

            </div>
        </div>
        <!--更多信息-->
        <div class="tabs moreinfo">
            <dl>
                <dt>婚姻状况：</dt>
                <dd>
                    <input type="radio" name="marriage" checked> 已婚
                    <input type="radio" name="marriage"> 未婚
                    <input type="radio" name="marriage"> 保密
                </dd>
            </dl>
            <dl>
                <dt>月收入：</dt>
                <dd>
                    <select >
                        <option value="">请选择</option>
                    </select>
                </dd>
            </dl>
            <dl>
                <dt>身份证号码：</dt>
                <dd>
                    <input type="text" maxlength="18">
                </dd>
            </dl>
            <dl>
                <dt>教育程度：</dt>
                <dd>
                    <select >
                        <option value="">请选择</option>
                    </select>
                </dd>
            </dl>
            <dl>
                <dt>所在行业：</dt>
                <dd>
                    <select >
                        <option value="">请选择</option>
                    </select>
                </dd>
            </dl>
        </div>
        <button class="submit">提交</button>
    </div>
</div>

<footer>
    <!-- service shop start-->
    <div class="service cleafix">
        <div class="wrap">
            <div class="service-top">
                <a href="javascript:void(0)" class="service-pic"><img src="/images/head/fly.png" alt="" /></a>
                <a href="javascript:void(0)" class="service-pic"><img src="/images/head/earth.png" alt="" /></a>
                <a href="javascript:void(0)" class="service-pic"><img src="/images/head/suifei.png" alt="" /></a>
                <a href="javascript:void(0)" class="service-pic"><img src="/images/head/taobao.png" alt="" /></a>
            </div>
        </div>
    </div>
    <div class="service-center">
        <div class="wrap cleafix">
            <dl class="shop-all">
                <dt>购物指南</dt>
                <dd><a href="javascript:void(0)">购物流程</a></dd>
                <dd><a href="javascript:void(0)">会员介绍</a></dd>
                <dd><a href="javascript:void(0)">生活旅行/团购</a></dd>
                <dd><a href="javascript:void(0)">常见问题</a></dd>
                <dd><a href="javascript:void(0)">大家电</a></dd>
                <dd><a href="javascript:void(0)">联系客服</a></dd>
            </dl>
            <dl class="shop-all">
                <dt>配送方式</dt>
                <dd><a href="javascript:void(0)">上门自提</a></dd>
                <dd><a href="javascript:void(0)">211显示达</a></dd>
                <dd><a href="javascript:void(0)">配送服务咨询</a></dd>
                <dd><a href="javascript:void(0)">配送费收取标准</a></dd>
                <dd><a href="javascript:void(0)">海外配送</a></dd>
            </dl>
            <dl class="shop-all">
                <dt>支付方式</dt>
                <dd><a href="javascript:void(0)">货到收款</a></dd>
                <dd><a href="javascript:void(0)">在线支付</a></dd>
                <dd><a href="javascript:void(0)">分期付款</a></dd>
                <dd><a href="javascript:void(0)">邮局汇款</a></dd>
                <dd><a href="javascript:void(0)">公司转账</a></dd>

            </dl>
            <dl class="shop-all">
                <dt>售后服务</dt>
                <dd><a href="javascript:void(0)">售后政策</a></dd>
                <dd><a href="javascript:void(0)">价格保护</a></dd>
                <dd><a href="javascript:void(0)">退款说明</a></dd>
                <dd><a href="javascript:void(0)">返修、退换货</a></dd>
                <dd><a href="javascript:void(0)">取消订单</a></dd>
            </dl>
            <dl>
                <dt>特色服务</dt>
                <dd><a href="javascript:void(0)">夺宝岛</a></dd>
                <dd><a href="javascript:void(0)">DIY装机</a></dd>
                <dd><a href="javascript:void(0)">生活旅行</a>/团购</dd>
                <dd><a href="javascript:void(0)">常见问题</a></dd>
                <dd><a href="javascript:void(0)">大家电</a></dd>
            </dl>
        </div>
    </div>
    <!-- service shop end-->

    <!--under footer start-->
    <div class="footer">
        <div class="wrap">
            <div class="foot-link">
                <a href="javascript:void(0)">关于我们</a>|
                <a href="javascript:void(0)">联系我们</a>|
                <a href="javascript:void(0)">联系客服</a>|
                <a href="javascript:void(0)">商家入驻</a>|
                <a href="javascript:void(0)">营销中心</a>|
                <a href="javascript:void(0)">手机商城</a>|
                <a href="javascript:void(0)">友情链接</a>|
                <a href="javascript:void(0)">销售联盟</a>|
                <a href="javascript:void(0)">ENGLISH SITE</a>|
                <a href="javascript:void(0)">CONTACT US</a>
            </div>
            <div class="autocation">
                <a href="javascript:void(0)"><img src="/images/head/kexin.jpg" alt="" /></a>
                <a href="javascript:void(0)"><img src="/images/head/jywz.jpg" alt="" /></a>
                <a href="javascript:void(0)"><img src="/images/head/inter.jpg" alt="" /></a>
            </div>
        </div>

    </div>
    <!--under footer end-->
</footer>
<!--big footer end-->

</body>
</html>